<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <h:outputStylesheet library="css" name="animate.css"/>
        <h:outputStylesheet library="css" name="bootstrap.min.css"/>
        <h:outputStylesheet library="css" name="font-awesome.min.css"/>
        <h:outputStylesheet library="css" name="templatemo_misc.css"/>
        <h:outputStylesheet library="css" name="templatemo_style.css"/>
        <h:outputStylesheet library="css" name="mystyle.css"/>
    </h:head>
    <h:body>
        <h:form id="form">
            <div class="site-header">
                <div class="main-navigation">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12 responsive-menu">
                                <a href="#" class="menu-toggle-btn">
                                    <i class="fa fa-bars">sss</i>
                                </a>
                            </div> <!-- /.col-md-12 -->
                            <div class="col-md-12 main_menu">
                                <ul>
                                    <li><a class="show-1 templatemo_home" href="#">Home</a></li>
                                    <li><a class="show-2 templatemo_page2" href="#">Registration</a></li>
                                    <li><a class="show-3 templatemo_page3" href="#">Transportation Service</a></li>
                                    <!--<li><a class="show-4 templatemo_page4" href="#">Users</a></li>-->
                                </ul>
                            </div> <!-- /.col-md-12 -->
                        </div> <!-- /.row -->
                    </div> <!-- /.container -->
                </div> <!-- /.main-navigation -->
            </div> <!-- /.site-header -->

            <div id="menu-container">

                <div class="content homepage" id="menu-1">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-9 col-sm-10">
                                <div class="about-us-content">
                                    <div class="toggle-content" id="tab7">
                                        <center>
                                            <h:form>
                                                From:
                                                <h:inputText required="true" value="#{searchBean.fromData}"/>
                                                <br/>
                                                <br/>
                                                To:
                                                <h:inputText required="true" value="#{searchBean.toData}" />
                                                <br/>
                                                <br/>
                                                <h:commandButton value="Search" action="#{searchBean.data()}"/>
                                                <br/>
                                            </h:form>
                                        </center>
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab8">
                                        66666
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab9">
                                        menuuu122
                                    </div> <!-- /.toggle-content -->

                                </div> <!-- /.inner-content -->
                            </div> <!-- /.col-md-9 -->
                            <div class="col-md-3 col-sm-2">
                                <div id="icons-about">
                                    <ul class="tabs">
                                        <li>
                                            <a href="#tab7" class="icon-item">
                                                <span>Search</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab8" class="icon-item">
                                                <span>Shortest Path</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab9" class="icon-item">
                                                <span>Login</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                    </ul>
                                </div> <!-- /.icons -->
                            </div> <!-- /.col-md-3 -->		

                        </div> <!-- /.row -->
                    </div> <!-- /.slide-item -->
                </div> <!-- /.homepage -->

                <div class="content products" id="menu-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-9 col-sm-10">
                                <div class="about-us-content">
                                    <div class="toggle-content" id="tab10">
                                        <h:form>
                                            <br/>
                                            Registration Page
                                            <br/><br/>
                                            User ID: 
                                            <h:inputText class="textInput" id="txtID" required="true"
                                                         value="#{userbean.id}" />
                                            <br/>
                                            E-mail: 
                                            <h:inputText class="textInput" id="txtEmail" required="true"
                                                         value="#{userbean.email}"/>
                                            <br/>
                                            Password:
                                            <h:inputSecret class="textInput" id="txtPass" required="true"
                                                           value="#{userbean.pass}"/>
                                            <br/>
                                            <h:commandButton class="vote" action="#{userbean.register()}" value="Submit"/>
                                            <br/><br/>
                                            <a href="index9.xhtml">Index9</a>
                                        </h:form>   
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab11">
                                        menu2222 
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab12">
                                        menuuu23333
                                    </div> <!-- /.toggle-content -->
                                </div> <!-- /.inner-content -->
                            </div> <!-- /.col-md-9 -->
                            <div class="col-md-3 col-sm-2">
                                <div id="icons-about">
                                    <ul class="tabs">
                                        <li>
                                            <a href="#tab10" class="icon-item">
                                                <span>View</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab11" class="icon-item">
                                                <span>Edit and View</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab12" class="icon-item">
                                                <span>Add</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                    </ul>
                                </div> <!-- /.icons -->
                            </div> <!-- /.col-md-3 -->		

                        </div> <!-- /.row -->
                    </div> <!-- /.slide-item -->
                </div> <!-- /.products -->



                <div class="content services" id="menu-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-9 col-sm-10">
                                <div class="inner-content">
                                    <div class="toggle-content" id="tab1">
                                        <h2 class="page-title">Our Services</h2>
                                        Types of Transportations

                                        <h:form>
                                            <h:dataTable value="#{allservicebean.attributeTypes}" var="item">
                                                <p:column>
                                                    <h:commandLink value="#{item.name}" 
                                                                   actionListener="#{allservicebean.showInfo()}"  />
                                                </p:column>
                                            </h:dataTable>
                                        </h:form>
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab2">
                                        <h2 class="page-title">Our services</h2>
                                        <h:form>
                                            <h:dataTable value="#{allservicebean.tranServices}" var="item">
                                                <p:column>
                                                    <h:commandLink value="#{item.name}" actionListener="#{allservicebean.showInfotranservice()}"  />
                                                </p:column>
                                            </h:dataTable>
                                        </h:form>
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab3">
                                        <h2 class="page-title">Testimonials</h2>
                                        menuu33
                                    </div> <!-- /.toggle-content -->
                                </div> <!-- /.inner-content -->
                            </div> <!-- /.col-md-9 -->
                            <div class="col-md-3 col-sm-2">
                                <div id="icons">
                                    <ul class="tabs">
                                        <li>
                                            <a href="#tab1" class="icon-item">
                                                <span>Transportations</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab2" class="icon-item">
                                                <span>Types of specific transportation</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab3" class="icon-item">
                                                <span>All transportations</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                    </ul>
                                </div> <!-- /.icons -->
                            </div> <!-- /.col-md-3 -->

                        </div> <!-- /.row -->
                    </div> <!-- /.container -->	

                </div> <!-- /.services -->


                <div class="content about" id="menu-4">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-9 col-sm-10">
                                <div class="about-us-content">
                                    <div class="toggle-content" id="tab4">
                                        <h2 class="page-title">Users</h2>

                                        menuuu4111
                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab5">
                                        <h2 class="page-title">FeedBacks</h2>
                                        menuuu42

                                    </div> <!-- /.toggle-content -->
                                    <div class="toggle-content" id="tab6">
                                        <h2 class="page-title">Comments</h2>
                                        menuuu4333
                                    </div> <!-- /.toggle-content -->
                                </div> <!-- /.inner-content -->
                            </div> <!-- /.col-md-9 -->
                            <div class="col-md-3 col-sm-2">
                                <div id="icons-about">
                                    <ul class="tabs">
                                        <li>
                                            <a href="#tab4" class="icon-item">
                                                <span>Users Info</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab5" class="icon-item">
                                                <span>FeedBacks</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                        <li>
                                            <a href="#tab6" class="icon-item">
                                                <span>Comments</span>
                                            </a> <!-- /.icon-item -->
                                        </li>
                                    </ul>
                                </div> <!-- /.icons -->
                            </div> <!-- /.col-md-3 -->
                        </div> <!-- /.row -->
                    </div> <!-- /.container -->
                </div> <!-- /.services -->




            </div> <!-- /#menu-container -->



            <div id="templatemo_footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <p>Copyright &copy; ITI | by <a href="http://www.iti.com" rel="nofollow">ITI</a></p>
                        </div> <!-- /.col-md-12 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
            </div> <!-- /.templatemo_footer -->
        </h:form>
        <h:outputScript library="scripts" name="bootstrap.js"/>
        <h:outputScript library="scripts" name="jquery.lightbox.js"/>
        <h:outputScript library="scripts" name="jquery-1.10.2.min.js"/>
        <h:outputScript library="scripts" name="jquery-migrate-1.2.1.min.js"/>
        <h:outputScript library="scripts" name="modernizr.js"/>
        <h:outputScript library="scripts" name="tabs.js"/>
        <h:outputScript library="scripts" name="templatemo_custom.js"/>

    </h:body>
</html>

